<template>
  <nav class="pagination" aria-label="分页">
    <button
      class="pagination__btn"
      :disabled="page <= 1"
      @click="$emit('change', page - 1)"
    >
      上一页
    </button>
    <span class="pagination__info">
      第 {{ page }} / {{ totalPages }} 页，共 {{ total }} 条
    </span>
    <button
      class="pagination__btn"
      :disabled="page >= totalPages"
      @click="$emit('change', page + 1)"
    >
      下一页
    </button>
  </nav>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  page: { type: Number, default: 1 },
  pageSize: { type: Number, default: 12 },
  total: { type: Number, default: 0 }
});

const totalPages = computed(() =>
  Math.max(1, Math.ceil((props.total || 0) / (props.pageSize || 1)))
);
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
  font-size: 14px;
  color: var(--gray-700);
}

.pagination__btn {
  border: none;
  border-radius: 999px;
  background: var(--gray-100);
  padding: 6px 16px;
  color: var(--gray-700);
  font-weight: 600;
  transition: background 0.2s ease;

  &:hover:enabled {
    background: var(--gray-200);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.pagination__info {
  font-size: 13px;
  color: var(--gray-500);
}

@media (max-width: 480px) {
  .pagination {
    flex-direction: column;
    gap: 10px;
  }
}
</style>
